<template>
    <div>
        <div class="title">
            <span>基本信息</span>
            <div>
                <el-button icon="el-icon-refresh" @click="refresh"></el-button>
            </div>
        </div>
        <div class="container" :loading="loading">
            <div class="itemBox">
                <div class="line">
                <div>活动名称</div>
                <div>{{couponInfo.activityName}}</div>
                </div>
                <div class="line">
                <div>活动状态</div>
                <div>{{couponInfo.delFlag == '0' ? '正常' : '停用'}}</div>
                </div>
                <div class="line">
                <div>商户名称</div>
                <div>{{couponInfo.merchantName}}</div>
                </div>
                <div class="line">
                <div>商户号</div>
                <div>{{couponInfo.merchantNo}}</div>
                </div>
            </div>
            <div class="itemBox">
                <div class="line">
                <div>创建时间</div>
                <div>{{couponInfo.createTime}}</div>
                </div>
                <div class="line">
                <div>分摊类型</div>
                <div>{{couponInfo.type == '1' ? '比例分摊' : '金额分摊' }}</div>
                </div>
                <div class="line" v-if="couponInfo.type == '1'">
                    <div>分摊比例
                      <el-tooltip class="item" effect="dark" content="商户优惠金额=总优惠金额×分摊比例%" placement="bottom">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div>{{couponInfo.ratio / 100}}%</div>
                </div>
                <div class="line" v-if="couponInfo.type == '2'">
                    <div>商户分摊金额（元）</div>
                    <div>{{couponInfo.merchantAmount != null ? couponInfo.merchantAmount/100 : 0}}</div>
                </div>
                <div class="line" v-if="couponInfo.totalAmount != null">
                <div>总优惠金额</div>
                <div>{{couponInfo.totalAmount}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { couponDe } from '@/api/api'
export default {
    name: 'ccbCouponDetail',

    data() {
        return {
            id: '',
            loading: false,
            couponInfo: {},
        };
    },
 
    //监听参数的变化，如监听路由中id值的变化：
    watch:{
        '$route.params.id': {
            handler(newVal,oldVal){
                //判断newVal有没有值监听路由变化
                if(newVal != undefined) {
                    this.getCouponDetail()
                }
        },
            deep: true
        },
    },
    
    created() {
        this.getCouponDetail()
    },

    methods: {
        // 刷新
        refresh() {
            this.loading = true
            this.getCouponDetail()
        },
        // 获取详情信息
        async getCouponDetail() {
            this.loading = true
            let res = await couponDe(this.$route.params.id)
            if(res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else {
                if(res.code == 200) {
                    this.couponInfo = res.data
                    this.loading = false
                } else {
                    this.$message.error(res.message)
                    this.loading = false
                }
            }
        }
    },
};
</script>

<style lang="less" scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .attachmentitem {
    width: 16.5%;
    text-align: center;
    margin-bottom: 20px;
    div {
      font-size: 14px;
      &:nth-child(1) {
        margin-bottom: 5px;
      }
    }
  }
}
</style>